<template>
  <div class="page-container">
    <button class="back-button" @click="goToHome">
      <span class="icon-arrow-left"></span>
      返回首页
    </button>
    
    <div class="header-section">
      <h1>客户资料管理</h1>
      <p>管理所有客户的基本信息，包括联系方式、地址及其他重要资料</p>
    </div>
    
    <div class="action-bar">
      <div class="search-group">
        <input 
          type="text" 
          placeholder="搜索客户名称/电话..." 
          class="search-input"
        >
        <button class="search-btn">搜索</button>
      </div>
      <div class="action-buttons">
        <button class="import-btn">导入数据</button>
        <button class="export-btn">导出数据</button>
        <button class="add-btn">添加客户</button>
      </div>
    </div>
    
    <div class="card">
      <div class="filter-row">
        <div class="filter-item">
          <label>客户类型:</label>
          <select class="filter-select">
            <option value="">全部</option>
            <option value="vip">VIP客户</option>
            <option value="merchant">商家客户</option>
            <option value="enterprise">企事业单位</option>
          </select>
        </div>
        <div class="filter-item">
          <label>状态:</label>
          <select class="filter-select">
            <option value="">全部</option>
            <option value="active">活跃</option>
            <option value="inactive">非活跃</option>
          </select>
        </div>
        <div class="filter-item">
          <label>加入日期:</label>
          <input type="date" class="date-input">
          <span class="to-text">至</span>
          <input type="date" class="date-input">
        </div>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th><input type="checkbox" class="select-all"></th>
            <th>客户名称</th>
            <th>类型</th>
            <th>联系人</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>加入日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox"></td>
            <td>张三</td>
            <td>个人</td>
            <td>张三</td>
            <td>138****5678</td>
            <td>zhangsan@example.com</td>
            <td>2023-05-12</td>
            <td class="action-buttons">
              <button class="btn-view">查看</button>
              <button class="btn-edit">编辑</button>
              <button class="btn-delete">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>李四</td>
            <td>VIP客户</td>
            <td>李四</td>
            <td>139****1234</td>
            <td>lisi@example.com</td>
            <td>2023-03-20</td>
            <td class="action-buttons">
              <button class="btn-view">查看</button>
              <button class="btn-edit">编辑</button>
              <button class="btn-delete">删除</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>王五</td>
            <td>个人</td>
            <td>王五</td>
            <td>137****8901</td>
            <td>wangwu@example.com</td>
            <td>2023-07-05</td>
            <td class="action-buttons">
              <button class="btn-view">查看</button>
              <button class="btn-edit">编辑</button>
              <button class="btn-delete">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="pagination">
      <div class="page-info">显示 1-3 条，共 28 条</div>
      <div class="page-controls">
        <button class="page-btn">上一页</button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">...</button>
        <button class="page-btn">10</button>
        <button class="page-btn">下一页</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerInfoManage',
  methods: {
    goToHome() {
      this.$router.push('/home');
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header-section {
  margin: 20px 0 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.header-section h1 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 24px;
}

.header-section p {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-group {
  display: flex;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  width: 300px;
  font-size: 14px;
  border-right: none;
}

.search-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #2980b9;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.import-btn, .export-btn, .add-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.import-btn {
  background-color: #95a5a6;
  color: white;
}

.import-btn:hover {
  background-color: #7f8c8d;
}

.export-btn {
  background-color: #f39c12;
  color: white;
}

.export-btn:hover {
  background-color: #e67e22;
}

.add-btn {
  background-color: #2ecc71;
  color: white;
}

.add-btn:hover {
  background-color: #27ae60;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.filter-row {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  color: #34495e;
  font-size: 14px;
  font-weight: 500;
}

.filter-select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

.date-input {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.to-text {
  color: #7f8c8d;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}

.data-table th {
  background-color: #f9f9f9;
  font-weight: 600;
  color: #34495e;
}

.data-table tbody tr:hover {
  background-color: #f9f9f9;
}

.select-all {
  cursor: pointer;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-view, .btn-edit, .btn-delete {
  padding: 4px 8px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-view {
  background-color: #3498db;
  color: white;
}

.btn-edit {
  background-color: #2ecc71;
  color: white;
}

.btn-delete {
  background-color: #e74c3c;
  color: white;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 0 10px;
}

.page-info {
  color: #7f8c8d;
  font-size: 14px;
}

.page-controls {
  display: flex;
  gap: 5px;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.page-btn.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

.page-btn:hover:not(.active) {
  border-color: #3498db;
  color: #3498db;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.icon-arrow-left::before {
  content: '←';
}
</style>